<template>
	<view class="orderList-item">
		<view class="orderList-item-top">
			<view class="orderList-item-shop">
				<image src="../../pages/static/icon_home_vegetable@2x.png" class="orderList-item-shoplogo"></image>
				<view class="orderList-item-shopname">阿帝蔬菜店</view>
			</view>
			<view class="orderList-item-state" v-if="orderStatus == 0">备货中</view>
			<view class="orderList-item-state" v-if="orderStatus == 1">配送中</view>
			<view class="orderList-item-state" v-if="orderStatus == 2">已完成</view>
		</view>
		<view class="orderList-item-content">
			<view class="orderList-item-shopping">
				<image src="../../pages/static/icon_home_vegetable@2x.png" class="orderList-item-logo"></image>
			</view>
			<view class="orderList-item-right">
				<view class="orderList-item-title">上海青250g/半斤</view>
				<view class="orderList-item-number">x1</view>
			</view>
		</view>
		<view class="orderList-item-list">
			<view class="orderList-list-left">小计</view>
			<view class="orderList-list-right">共2种食材</view>
		</view>
		<view class="orderList-item-list">
			<view class="orderList-list-left">下单时间</view>
			<view class="orderList-list-right">2020-3-25  10:14</view>
		</view>
		<view class="orderList-item-bottom">
			<view class="orderList-item-cancel">取消订单</view>
			<view class="orderList-item-finish">已完成</view>
		</view>
	</view>
</template>

<script>
const app = getApp();

export default {
	data() {
		return {
			orderStatus: 0,
		};
	},
	created() {},
	methods: {
		
	}
};
</script>

<style lang="less">
	.orderList-item{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		margin: 24rpx 30rpx 0;
		display: flex;
		flex-direction: column;
		
		.orderList-item-top{
			width: 620rpx;
			height: 56rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 24rpx 30rpx 0;
			
			.orderList-item-shop{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 212rpx;
				height: 56rpx;
				
				.orderList-item-shoplogo{
					width: 56rpx;
					height: 56rpx;
				}
				
				.orderList-item-shopname{
					font-size: 28rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #5BB954;
				}
			}
			
			.orderList-item-state{
				font-size: 28rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FFA138;
			}
		}
		
		.orderList-item-content{
			width: 630rpx;
			height: 171rpx;
			margin: 20rpx 30rpx 0;
			border-bottom: 1rpx solid #E8E8E8;
			display: flex;
			
			.orderList-item-shopping{
				width: 150rpx;
				height: 150rpx;
				background: rgba(255,255,255,021);
				border-radius: 6rpx;
				border: 1rpx solid rgba(151,151,151,0.21);
				display: flex;
				align-items: center;
				
				.orderList-item-logo{
					width: 150rpx;
					height: 138rpx;
				}
			}
			
			.orderList-item-right{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 132rpx;
				
				.orderList-item-title{
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					margin-left: 30rpx;
				}
				
				.orderList-item-number{
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					margin-left: 413rpx;
				}
			}
		}
		
		.orderList-item-list{
			width: 630rpx;
			height: 42rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 25rpx 30rpx 0;
			
			.orderList-list-left{
				font-size: 28rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #333333;
			}
			.orderList-list-right{
				font-size: 30rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}
		}
		.orderList-item-bottom{
			width: 400rpx;
			height: 86rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 24rpx 0 80rpx 260rpx;
			
			.orderList-item-cancel{
				width: 162rpx;
				height: 86rpx;
				border-radius: 12rpx;
				border: 2rpx solid #5BB954;
				font-size: 28rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #5BB954;
				line-height: 86rpx;
				text-align: center;
			}
			
			.orderList-item-finish{
				width: 222rpx;
				height: 86rpx;
				background: #5BB954;
				border-radius: 12rpx;
				font-size: 26rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 86rpx;
				text-align: center;
			}
		}
	}
</style>
